<!--
 * @Author: zhang ke
 * @Date: 2025-06-24 16:01:12
 * @LastEditors: your name
 * @LastEditTime: 2025-07-01 17:35:09
 * @Description: 
 * @FilePath: \vue3-admin\src\views\product\sku\index.vue
-->
<template>
  <div>
    <el-card>
      <!-- 表格 -->
      <el-table border :data="tableData" style="width: 100%;margin:10px 0">
        <el-table-column label="序号" type="index" align="center" width="100" />
        <el-table-column prop="skuName" label="名称" width="100" />
        <el-table-column prop="skuDesc" label="描述" width="300" />
        <el-table-column prop="img" label="默认图片" width="200">
          <template #default="scope">
            <img :src="scope.row.skuDefaultImg" style="width:80px;height:80px">
          </template>
        </el-table-column>
        <el-table-column prop="weight" label="重量(克)" width="200" />
        <el-table-column prop="price" label="价格" width="200" />
        <el-table-column fixed="right" label="操作" width="300">
          <template #default="scope">
            <el-button :type="scope.row.isSale == 1 ? 'info' : 'success'"
              :icon="scope.row.isSale == 1 ? 'Bottom' : 'Top'" @click="saleSku(scope.row)" />
            <el-button type="primary" icon="Edit"></el-button>
            <el-button type="info" icon="InfoFilled" @click="openDetail(scope.row)" />
            <el-popconfirm :title="`确定删除${scope.row.skuName}`" width="220px" @confirm="delSku(scope.row)">
              <template #reference >
                <el-button type="danger" icon="Delete" />
              </template>
            </el-popconfirm>

          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination @current-change="getDataList" @size-change="sizeChange" v-model:current-page="currentPage"
        v-model:page-size="pageSize" :page-sizes="[3, 5, 7, 10]" background
        layout="prev,pager,next,jumper,-> ,sizes,total" :total="total" />

      <!-- 商品详情的抽屉 -->
      <el-drawer v-model="drawer" title="查看商品的详情" :before-close="handleClose">
        <template #default>
          <el-row style="margin: 10px 0">
            <el-col :span="6">名称</el-col>
            <el-col :span="18">{{ skuInfo.skuName }}</el-col>
          </el-row>
          <el-row style="margin: 10px 0">
            <el-col :span="6">描述</el-col>
            <el-col :span="18">{{ skuInfo.skuDesc }}</el-col>
          </el-row>
          <el-row style="margin: 10px 0">
            <el-col :span="6">价格</el-col>
            <el-col :span="18">{{ skuInfo.price }}</el-col>
          </el-row>
          <el-row style="margin: 10px 0">
            <el-col :span="6">平台属性</el-col>
            <el-col :span="18">
              <el-tag style="margin: 5px" v-for="item in skuInfo.skuAttrValueList" :key="item.id">
                {{ item.valueName }}
              </el-tag>
            </el-col>
          </el-row>
          <el-row style="margin: 10px 0">
            <el-col :span="6">销售属性</el-col>
            <el-col :span="18">
              <el-tag style="margin: 5px" v-for="item in skuInfo.skuSaleAttrValueList" :key="item.id">
                {{ item.saleAttrValueName }}
              </el-tag>
            </el-col>
          </el-row>
          <el-row style="margin: 10px 0">
            <el-col :span="6">商品图片</el-col>
            <el-col :span="18">
              <el-carousel :interval="4000" type="card" height="200px">
                <el-carousel-item v-for="item in skuInfo.skuImageList" :key="item.id">
                  <img :src="item.imgUrl" alt="" style="width: 100%; height: 100%" />
                </el-carousel-item>
              </el-carousel>
            </el-col>
          </el-row>
        </template>
      </el-drawer>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import {
  reqSkuList,
  reqSaleSku,
  reqCancelSale,
  reqSkuInfo,
  reqRemoveSku
} from '@/api/product/sku'
import type {
  SkuData,
  SkuResponseData,
  SkuInfoData,
} from '@/api/product/sku/type'
import { ElMessage } from 'element-plus'
let currentPage = ref<number>(1)
let pageSize = ref<number>(3)
let total = ref<number>(10)
let tableData = ref<SkuData[]>([])
let drawer = ref<boolean>(false)
let skuInfo = ref<any>({})
//获取列表数据
const getDataList = async () => {
  let res: SkuResponseData = await reqSkuList(currentPage.value, pageSize.value)
  if (res.code == 200) {
    tableData.value = res.data.records
    total.value = res.data.total
  }

}
onMounted(() => {
  getDataList()
})
//切换一页显示几条
const sizeChange = () => {
  getDataList()
}
//上架或下架
const saleSku = async (row: SkuData) => {
  if (row.isSale == 1) {
    let res = await reqCancelSale(row.id as number)
    if (res.code == 200) {
      ElMessage({
        type: 'success',
        message: '下架成功'
      })
      getDataList()
    }
  } else {
    let res = await reqSaleSku(row.id as number)
    if (res.code == 200) {
      ElMessage({
        type: 'success',
        message: '下架成功'
      })
      getDataList()
    }
  }

}
//查看详情的接口
const openDetail = async (row: SkuData) => {
  let res:SkuInfoData = await reqSkuInfo(row.id  as number)
  if (res.code == 200) {
    drawer.value = true
    skuInfo.value = res.data
  }
}
//抽屉关闭事件
const handleClose = () => {
  drawer.value = false
}
//删除sku
const delSku = async (row:SkuData)=>{
  let res = await reqRemoveSku(row.id as number)
  if(res.code == 200){
      ElMessage({
        type: 'success',
        message: '删除成功'
      })
      currentPage.value = tableData.value.length > 1 ? currentPage.value : currentPage.value - 1
      getDataList()
  }else{
    ElMessage({
        type: 'error',
        message: '删除失败'
      })
  }
}
</script>

<style lang="scss" scoped>
.el-carousel__item h3 {
  color: #475669;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
  text-align: center;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
</style>